<template>
	<view class="content" @touchstart="handletouchstart" @touchend="handletouchend" @touchmove="touchmoveEvent">
		<view class='read':style="[{transform: `translateX(${slidingDistance}px)`}]">{{cpContent}}</view>
		<view class="box">{{cpContent}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: 355,
				slidingDistance: 0,
				cpContent: '',
				startClientX: 0,
				currentPage: 0
			}
		},
		onLoad({
			link
		}) {
			console.log(link)
			this.getData(link)
		},
		mounted() {

		},
		methods: {
			handletouchstart(e) {
				this.startClientX = e.changedTouches[0].clientX
			},
			touchmoveEvent(e) {
				// console.log(2)

			},
			handletouchend(e) {
				let endClientX = e.changedTouches[0].clientX
				let distance = endClientX - this.startClientX
				if (distance > 80) {
					console.log('上一页', this.currentPage)
					if (this.currentPage > 0) {
						this.currentPage--
						this.slidingDistance += this.width
					}
				}
				if (distance < -80) {
						console.log('下一页',this.currentPage)
					if(this.currentPage<this.maxPage){
						this.currentPage++
						this.slidingDistance -= this.width
					}
				}
			},
			getData(link) {
				//chapter/
				link = encodeURIComponent(link)
				this.$request({
					url: '/chapter/' + link,
					dataType: 'json',
					method: 'GET'
				}).then(res => {
					let data = res[1].data.chapter
					console.log(data)
					this.cpContent = data.cpContent
					uni.setNavigationBarTitle({
						title: data.title
					})
					const query = uni.createSelectorQuery().in(this);
					let height=0
					this.$nextTick(()=>{
						query.select('.read').boundingClientRect(data => {
							height=data.height
						}).select('.box').boundingClientRect(data => {
							console.log(data.height/height)
							this.maxPage=Math.ceil(data.height/height)
							console.log(this.maxPage)
						}).exec();
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		overflow: hidden;

		.read {
			height: 100%;
			columns: calc(100vw - 32px) 1;
			column-gap: 40rpx;
			// overflow: hidden;
			line-height: 40rpx;
			transition: .5s;
			transform: translateX(0rpx);
		}
		
		.box{
			opacity: 0;
		}
	}
</style>
